import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
    HomeFilled,
    User,
    Avatar,
    OfficeBuilding,
    Calendar,
    Money
} from '@element-plus/icons-vue'

export function useAside(emit) {
    const route = useRoute()
    const router = useRouter()
    const activeIndex2 = ref('1')

    // 菜单映射配置
    const menuMap = {
        '/welcome': { index: '1', name: 'welcome', label: '首页' },
        '/productlist': { index: '2-1', name: 'productlist', label: '商品列表' },
        '/skulist': { index: '2-2', name: 'skulist', label: 'SKU列表'}
    }

    // 处理菜单点击
    const handleMenuClick = (index) => {
        const menuItem = Object.values(menuMap).find(item => item.index === index)
        if (menuItem) {
            router.push({ path: `/${menuItem.name}` })
            emit('add-tab', {
                name: menuItem.name,
                label: menuItem.label
            })
        }
    }

    // 监听路由变化
    watch(() => route.path, (newPath) => {
        // 只处理非首页路由
        if (newPath === '/' || newPath === '/welcome') return

        const menuItem = Object.values(menuMap).find(item =>
            newPath === `/${item.name}` ||
            newPath.startsWith(`/${item.name}/`)
        )

        if (menuItem) {
            activeIndex2.value = menuItem.index
        }
    }, { immediate: true })

    return {
        activeIndex2,
        handleMenuClick,
        menuIcons: {
            HomeFilled,
            User,
            Avatar,
            OfficeBuilding,
            Calendar,
            Money
        }
    }
}